// pages/environmentalPerformance/environmentalPerformance.js
import api from "../../config/api";
import {
    shareOptions,
} from "../../utils/access";
import request from "../../utils/request";
import {
    getBarAndTitleHeight,
    jump,
    setStorage,
    fixed
} from "../../utils/utils";
import { uploadAliyun } from '../../utils/UploadAliyun';

Page({

    /**
     * 页面的初始数据
     */
    data: {
        // 信号栏是否有背景
        hasBg: false,
        // 信号栏高度
        ...getBarAndTitleHeight(),
        // 是否是目标小区
        isTargetCommunity: true,
        id: '',
        info: {}
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.setData({
          id: options.id
        })
        this.getDetail()
        this.getTarget()
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        this.filterSheet = this.selectComponent('#filterSheet')
        this.poster = this.selectComponent('#poster')
        if(this.showPoster){
          this.init()
          this.showPoster = false
        }
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        
    },
    // 获取是否是目标小区
    async getTarget(){
      const res = await request.get(api.userType, null, { loading: false })
      this.setData({
        isTargetCommunity: res.data
      })
    },
    init(){
      let info = this.data.info
      this.poster.init(async (vm) => {
        // 背景图
        await vm.image({
          src: 'https://image-classify.daieco.com/kejian-quanzi/EXNvFMlQa3jr4ab7d09742e20ec0b1846dcc4961faf9.png',
          width: 750,
          height: 1390,
        })
        // logo
        await vm.image({
          src: 'https://image-classify.daieco.com/kejian-quanzi/ZkThuML3fYuLa698e9699a1a9ce68bc3b0c1afce8c38.png',
          width: 70,
          height: 20,
          top: 40,
          left: 48,
        })
        // 头像
        await vm.image({
          src: info.icon,
          width: 92,
          height: 92,
          top: 120,
          left: 48,
          radius: 46
        })
        // 昵称
        vm.text({
          content: info.nickName,
          left: 164,
          top: 174,
          fontSize: 28,
          color: '#0E0E0E',
          fontWeight: 'bold',
        })
        // 标题-日期
        const dateText = vm.text({
          content: info.userAddTime +'，',
          left: 48,
          top: 292,
          fontSize: 32,
          color: '#020100',
          fontWeight: 'bold',
        })
        // 标题-加入
        vm.text({
          content: '您加入可见分类',
          left: 48 + vm.pxToRpx(dateText?.width),
          top: 292,
          fontSize: 32,
          color: '#020100',
        })
        // 标题-环保卫士
        vm.text({
          content: '成为了一名环保卫士',
          left: 48,
          top: 404,
          fontSize: 68,
          color: '#020100',
          fontWeight: 'bold',
        })
        // 进行垃圾分类-标题
        vm.text({
          content: '截止日前，共进行垃圾分类',
          left: 48,
          top: 500,
          fontSize: 32,
          color: '#020100',
        })
        // 进行垃圾分类-次数
        vm.text({
          content: info.classifyNumber+'次',
          left: 48,
          top: 566,
          fontSize: 40,
          color: '#020100',
          fontWeight: 'bold',
        })
        // 坚持垃圾分类-标题
        vm.text({
          content: '坚持垃圾分类',
          left: 48,
          top: 658,
          fontSize: 32,
          color: '#020100',
        })
        // 坚持垃圾分类-天数
        vm.text({
          content: info.days+'天',
          left: 48,
          top: 724,
          fontSize: 40,
          color: '#020100',
          fontWeight: 'bold',
        })
        // 累计减少碳排放-标题
        vm.text({
          content: '累计减少碳排放',
          left: 48,
          top: 816,
          fontSize: 32,
          color: '#020100',
        })
        // 累计减少碳排放-排放量
        vm.text({
          content: info.carbonEmissionNum+'g',
          left: 48,
          top: 882,
          fontSize: 40,
          color: '#020100',
          fontWeight: 'bold',
        })
        // 相当于节省用电-标题
        vm.text({
          content: '相当于节省用电',
          left: 48,
          top: 974,
          fontSize: 32,
          color: '#020100',
        })
        // 相当于节省用电-电量
        vm.text({
          content: info.electric+'度',
          left: 48,
          top: 1040,
          fontSize: 40,
          color: '#020100',
          fontWeight: 'bold',
        })
        // 节省汽油-标题
        vm.text({
          content: '节省汽油',
          left: 48,
          top: 1132,
          fontSize: 32,
          color: '#020100',
        })
        // 节省汽油-电量
        vm.text({
          content: info.petrol+'毫升',
          left: 48,
          top: 1198,
          fontSize: 40,
          color: '#020100',
          fontWeight: 'bold',
        })
        // 提示-保护环境
        vm.text({
          content: '保护环境，从垃圾分类开始',
          left: 48,
          top: 1290,
          fontSize: 32,
          color: '#020100',
        })
        // 红心
        await vm.image({
          src: 'https://image-classify.daieco.com/kejian-quanzi/UQi7qJ2CIAzm488fb3a32fd5f72155c1bfdcf701b712.png',
          width: 94,
          height: 84,
          top: 580,
          left: 512,
        })
        // 比心手
        await vm.image({
          src: 'https://image-classify.daieco.com/kejian-quanzi/7tZJgoI2m0M6595d6b61d09649bb7215b1440f4b379d.png',
          width: 416,
          height: 532,
          top: 700,
          left: 334,
        })
        // 星星
        await vm.image({
          src: 'https://image-classify.daieco.com/kejian-quanzi/FoNngwu7Vhy49e6d8748c072379ba457b5060b8c9f43.png',
          width: 72,
          height: 74,
          top: 1072,
          left: 262,
        })
      })
    },
    async getDetail(){
      let id = this.data.id
      const res = await request.get(api.homeDetail, { userId: id }, { loading: false })
      if(res.httpStatus === 200){
        if(res.data.userAddTime){
          let date = res.data.userAddTime.split(' ')
          let time = date[0].split('-')
          res.data.userAddTime = time[0]+'年'+time[1]+'月'+time[2]+'日'
        }
        let info = res?.data
        info.carbonEmissionNum = info.carbonEmissionNum>=1000 ?fixed(info.carbonEmissionNum/1000,3)+'kg': (info.carbonEmissionNum || 0) +'g'
        this.setData({
          info
        })
        this.showPoster = true
        if(this.showPoster && this.poster){
          this.init()
          this.showPoster = false
        }
      }
    },
    // 分享图片操作
    handle(){
        this.filterSheet.show()
    },
    //操作确定 
    handleConfirm(e){
       let type = e.currentTarget.dataset.type
       if(type === 1){ //分享到圈子
        if(this.postLoading) return
        this.postLoading = true
        this.poster?.toPicture((res) => {
            uploadAliyun(
                res.tempFilePath,
                (picPath) => {
                    if(picPath){
                        setStorage('publishText', '')
                        setStorage('publishImage',[picPath] )
                        jump('publish')
                        this.postLoading = false
                        this.filterSheet.hide()
                    }
                },
                { directory: 'kejian-space/' }
            )
        })
       }else{ //保存图片
        if(this.loading) return
        this.loading = true
        // this.timeout = setTimeout(()=>{
        //     this.loading = false
        // },10000)
        this.poster?.savePicture((res)=>{
          if(!res){
            // clearTimeout(this.timeout)
            this.loading = false
          } else {
            this.handleCancel()
          }
        })
       }
    },
    // 操作取消
    handleCancel(){
        this.filterSheet.hide()
        this.loading = false
        // clearTimeout(this.timeout)
    },
    // 页面滚动事件
    onPageScroll(e) {
        this.setData({
            hasBg: e?.scrollTop > 20,
        });
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function (e) {
      return shareOptions('default',e)
    }
})